﻿
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
            <el-input v-model.number="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="picUrl">
            <el-upload class="avatar-uploader"
                       action="https://localhost:5001/api/Product/UploadImg"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="商品类型" prop="tId">
            <el-select v-model="ruleForm.tId" placeholder="请选择商品类型">
                <el-option v-for="item in types"
                           :key="item.tId"
                           :label="item.name"
                           :value="item.tId">
                </el-option>
            </el-select>
        </el-form-item>
        
        <el-form-item label="上下架" prop="status">
            <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">上架</el-radio>
                <el-radio :label="2">下架</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" v-on:click="submitForm('ruleForm')">立即创建</el-button>
            <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>


</div>

<script>
    var vm = new Vue({
        el: '#app',
        created() {
            this.bind(); //加载下拉
        },
        data() {
            return {
                imageUrl: '',  //图片回显
                types:[], //下拉
                ruleForm: {
                    pId: 0,
                    name: "",   //商品名称
                    price: '',   //价格
                    picUrl: "", //图片的地址
                    status: 1,  //上下架状态
                    tId: ''      //类型下拉
                },

                //rules属性定义验证规则
                rules: {
                    name: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' }, //一个{}就是一个验证规则
                        { min: 2, max: 30, message: '长度在 2 到 30个字符', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '请输入价格', trigger: 'blur' }, //验证规则哪里来？
                        { type: 'number', message: '价格必须是数字', trigger: 'blur' }
                    ],

                    status: [
                        { required: true, message: '请选择上下架状态', trigger: 'change' }
                    ],
                    picUrl: [
                        { required: true, message: '请上传图片', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            bind() { //下拉
                axios({
                    url: 'https://localhost:5001/api/Product/GetTypes',
                    method:'get'
                }).then((res) => {
                    console.log("下拉");
                    console.log(res.data);
                    this.types = res.data;
                 });
            },
            //提交方法
            submitForm(formName) {
                console.log('提交表单');

                //对表单进行验证
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');

                        //调用axios来完成添加功能
                        axios({
                            url: 'https://localhost:5001/api/Product/Add',
                            method: 'post',
                            data: this.ruleForm  //消息题传参用data:
                        }).then((res) => {
                            console.log("添加之后的回调");
                            console.log(res.data);
                            if (res.data.result > 0) {
                                this.$message('商品添加成功'); //饿了么ui里面的消息提示

                                location.href = '/Products/Index'; //跳转到显示页面
                            }
                        });
                    } else {
                        alert('验证失败！');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                console.log("重置表单");
                this.$refs[formName].resetFields();
            },

            handleAvatarSuccess(res, file) {
                console.log("图片上传成功之后的回调函数");
                console.log(res);
                if (res.result > 0) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                    this.ruleForm.picUrl = res.path;  //重要，把返回的相对路径，设置到表单中
                }
                
            },
            beforeAvatarUpload(file) {
                console.log("图片上传前的检测，检测图片大小，格式");

                //const isJPG = file.type === 'image/jpeg';
                //const isLt2M = file.size / 1024 / 1024 < 2;

                //if (!isJPG) {
                //    this.$message.error('上传头像图片只能是 JPG 格式!');
                //}
                //if (!isLt2M) {
                //    this.$message.error('上传头像图片大小不能超过 2MB!');
                //}
                //return isJPG && isLt2M;
            }
        }
    });
</script>